<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">职称申报管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">职称申报</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 下面修改的内容 -->
    <div class="add_update_div">
      <h2>申报信息</h2>
      <div>
        <el-form
          :model="applyTable"
          :rules="rules"
          ref="applyTable"
          label-width="200px"
          class="demo-applyTable"
        >
          <el-form-item label="职称活动" prop="professionalTitleActivity">
            <el-select v-model="applyTable.professionalTitleActivity">
              <el-option label="2021南京市专技人员" value="2020南京市专技人员"></el-option>
              <el-option label="2022南京市专技人员" value="2020南京市专技人员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报方式" prop="declarationMode">
            <el-select v-model="applyTable.declarationMode">
              <el-option label="线上" value="线上"></el-option>
              <el-option label="线下" value="线下"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="破格情况" prop="exceptionSituation">
            <el-select v-model="applyTable.exceptionSituation">
              <el-option label="优秀" value="优秀"></el-option>
              <el-option label="优秀骨干" value="优秀骨干"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报专技级别" prop="specialSkillLevel">
            <el-select v-model="applyTable.specialSkillLevel" placeholder="中级">
              <el-option label="中级" value="中级"></el-option>
              <el-option label="高级" value="高级"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报专业技术系列" prop="specialTechnologySeries">
            <el-select v-model="applyTable.specialTechnologySeries" placeholder="中学教师">
              <el-option label="中学教师" value="中学教师"></el-option>
              <el-option label="小学教师" value="小学教师"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报资格专业" prop="declarationQualificationMajor">
            <el-select v-model="applyTable.declarationQualificationMajor" placeholder="语文">
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报专技资格名称" prop="nameOfSpecialSkillDeclaration">
            <el-select v-model="applyTable.nameOfSpecialSkillDeclaration" placeholder="中学三级教师">
              <el-option label="中学三级教师" value="中学三级教师"></el-option>
              <el-option label="中学一级教师" value="中学一级教师"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="破格申报理由" prop="reasonsForDeclaration">
            <el-input
              type="textarea"
              v-model="applyTable.reasonsForDeclaration"
              class="textarea_css"
            ></el-input>
          </el-form-item>
          <el-form-item label="转系列申报理由" prop="reasonsForTransferSeriesDeclaration">
            <el-input
              type="textarea"
              v-model="applyTable.reasonsForTransferSeriesDeclaration"
              class="textarea_css"
            ></el-input>
          </el-form-item>
           <!-- prop="accessoryMaterial" -->
          <el-form-item label="附件材料">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
              v-model="applyTable.accessoryMaterial"
            >
              <el-button size="small" plain>点击上传</el-button>
              <span
                slot="tip"
                class="el-upload__tip"
                style="width:200px;color:red"
              >注意：1.必须上传的材料：《任职资格评审简明登记表》 《专业技术职务任职资格评审表》</span>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="applyOk('applyTable')" class="btn_css">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      applyTable: {
        professionalTitleActivity: "",
        declarationMode: "",
        exceptionSituation: "",
        specialSkillLevel: "",
        specialTechnologySeries: "",
        declarationQualificationMajor: "",
        nameOfSpecialSkillDeclaration: "",
        reasonsForDeclaration: "",
        reasonsForTransferSeriesDeclaration: ""
      },
      rules: {
        professionalTitleActivity: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        declarationMode: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        exceptionSituation: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        specialSkillLevel: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        specialTechnologySeries: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        declarationQualificationMajor: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        nameOfSpecialSkillDeclaration: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        reasonsForDeclaration: [
          { required: true, message: "请填写破格申报理由", trigger: "blur" }
        ],
        reasonsForTransferSeriesDeclaration: [
          { required: true, message: "请填写转系列申报理由", trigger: "blur" }
        ],
        // accessoryMaterial: [
        //   {required: true,  message: "请选择文件", trigger: "change" }
        // ]
      },
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  methods: {
    applyOk(formName) {
      // console.log(this.applyTable.professionalTitleActivity)
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios({
            url: "/PTDF/add",
            method: "post",
            data: {
              professionalTitleActivity: this.applyTable.professionalTitleActivity,
              declarationMode: this.applyTable.declarationMode,
              exceptionSituation: this.applyTable.exceptionSituation,
              specialSkillLevel: this.applyTable.specialSkillLevel,
              specialTechnologySeries: this.applyTable.specialTechnologySeries,
              declarationQualificationMajor: this.applyTable.declarationQualificationMajor,
              nameOfSpecialSkillDeclaration: this.applyTable.nameOfSpecialSkillDeclaration,
              reasonsForDeclaration: this.applyTable.reasonsForDeclaration,
              reasonsForTransferSeriesDeclaration: this.applyTable.reasonsForTransferSeriesDeclaration
            }
          }).then(res => {
            console.log(res);
            this.applyTable = res.data.data;
            if(res.status == 200){
                this.$router.push("/personalinformation/declareprocess");
            }else{
              this.$message.error('请保证数据全部填写！');
              
            }
            
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  },
  mounted() {
    sessionStorage.setItem("fName", "DeclareInformation");
  }
};
</script>
<style scoped lang="less">
/deep/.el-main::-webkeit-scrollbar {
  display: none;
}
h2 {
  margin: 20px;
}
.add_input_css {
  border: none;
}
.add_form {
  margin-left: 90px;
}
.add_update_div {
  width: 800px;
  margin-left: 100px;
}
.btn_css {
  background-color: #f5f7fa;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
  margin: 20px auto;
}
.textarea_css {
  width: 300px;
  // height: 100px;
}
</style>
